<template>
  <div>
    <div >
      <div>
        <h1>{{$t('message.systems.uptime')}}: {{uptimeFormat}}</h1>        
      </div> 
      <div id="chart1"></div>
      <div id="chart2"></div>
      <div id="chart3"></div>
    </div>  
  </div>

</template>

<script>
import { api } from "../../../../libs/api";
//Echarts相关属性请参考  http://echarts.baidu.com/option.html#xAxis
import echarts from "echarts";
import ebus from '../../../../libs/ebus'
var colors = ["#5793f3", " #1E90FF", "#675bba"];
var getData;
export default {
  computed: {
    uptimeFormat() {
      // 1day:86400 1h:3600 1minute:60
      if (this.uptime / (60 * 60 * 24) >= 1) {
        if (this.$i18n.locale == "zh-cn") {
          return (
            parseInt(this.uptime / 86400) +
            "天" +
            parseInt((this.uptime % 86400) / 3600) +
            "小时" +
            parseInt(((this.uptime % 86400) % 3600) / 60) +
            "分钟" +
            parseInt(((this.uptime % 86400) % 3600) % 60) +
            "秒"
          );
        } else {
          return (
            parseInt(this.uptime / 86400) +
            " Days " +
            parseInt((this.uptime % 86400) / 3600) +
            " Hours " +
            parseInt(((this.uptime % 86400) % 3600) / 60) +
            " Minutes " +
            parseInt(((this.uptime % 86400) % 3600) % 60) +
            " Seconds"
          );
        }
      } else {
        if (this.uptime / 3600 >= 1) {
          if (this.$i18n.locale == "zh-cn") {
            return (
              parseInt(this.uptime / 3600) +
              "小时" +
              parseInt((this.uptime % 3600) / 60) +
              "分钟" +
              parseInt((this.uptime % 3600) % 60) +
              "秒"
            );
          } else {
            return (
              parseInt(this.uptime / 3600) +
              " Hours " +
              parseInt((this.uptime % 3600) / 60) +
              " Minutes " +
              parseInt((this.uptime % 3600) % 60) +
              " Seconds"
            );
          }
        } else {
          if (this.uptime / 60 >= 1) {
            if (this.$i18n.locale == "zh-cn") {
              return (
                parseInt(this.uptime / 60) +
                "分钟" +
                parseInt(this.uptime % 60) +
                "秒"
              );
            } else {
              return (
                parseInt(this.uptime / 60) +
                " Minutes " +
                parseInt(this.uptime % 60) +
                " Seconds"
              );
            }
          } else {
            if (this.$i18n.locale == "zh-cn") {
              return this.uptime + "秒";
            } else {
              return this.uptime + " Seconds";
            }
          }
        }
      }
    }
  },
  data() {
    return {
      uptime: 986000,
      sysInfo: [],
      procCnt: 0,
      cpuLoad: [],
      ramInfo: {
        freeRamSize: 0,
        totalRamSize: 0
      },
      used: "",
      isInsert: false,
      info: true,
      optionRam: {
        title: {
          text: this.$t("message.systems.RamUsedInfo"),
          x: "center",
          y: "bottom"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} M ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: 120,
          data: [
            this.$t("message.systems.used"),
            this.$t("message.systems.free")
          ]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: this.$t("message.systems.used") },
              { value: 100, name: this.$t("message.systems.free") }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      optionCPU: {
        title: {
          text: this.$t("message.systems.cpuLoad"),
          x: "center",
          y: "bottom"
        },
        color: colors,

        tooltip: {
          trigger: "axis",
          formatter: "{a} : {c}%"
        },
        grid: {
          top: 75,
          bottom: 50,
          width: 1200,
          height: 200
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              // rotate: 30,//刻度值相对坐标轴偏移角度
              interval: 0
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
                width: 2
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return (
                    // this.$t("message.maintains.used") +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "") + "%"
                  );
                }
              }
            },
            data: ["", "", "", "", "", "", "", "", "", "", "", ""]
          },
          {}
        ],
        yAxis: [
          {
            type: "value",
            max: 100
          }
        ],
        series: [
          {
            name: this.$t("message.systems.cpuLoad"),
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(87,147,243)"
                  },
                  {
                    offset: 1,
                    color: "rgb(240, 248, 255)"
                  }
                ])
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      optionPro: {
        title: {
          text: this.$t("message.systems.procCnt"),
          x: "center",
          y: "bottom"
        },
        color: colors,

        tooltip: {
          trigger: "axis",
          formatter: "{a} : {c}"
        },

        grid: {
          top: 75,
          bottom: 50,
          width: 1200,
          height: 200
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return (
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "") + "%"
                  );
                }
              }
            },
            data: ["", "", "", "", "", "", "", "", "", "", "", ""]
          },
          {}
        ],
        yAxis: [
          {
            type: "value",
          }
        ],
        series: [
          {
            name: this.$t("message.systems.procCnt"),
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(87,147,243)"
                  },
                  {
                    offset: 1,
                    color: "rgb(240, 248, 255)"
                  }
                ])
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      }
    };
  },
  methods: {
    changeData() {
      api.onRequest("$method.$get.sys.running", null, null, null, function(
        message,
        reqReply
      ) {        
        var data = JSON.parse(message);
        
        if (data && data.code == 0 && data.data) {
          this.uptime = data.data.uptime;
          this.procCnt = data.data.procCnt;
          this.cpuLoad = data.data.cpuLoad;
          this.ramInfo.totalRamSize = data.data.totalRamSize;
          this.ramInfo.freeRamSize = data.data.freeRamSize;
          this.refreshChart1();
          this.refreshChart2();
          this.refreshChart3();
        }
      }.bind(this));
    },
    refreshChart1() {
      if (this.ramInfo.totalRamSize == 0) {
        this.isInsert = true;
        this.used = 0 + "%";
        this.optionRam.series[0].data[0].value = 0;
        this.optionRam.series[0].data[1].value = 100;
      } else {
        this.isInsert = false;
        var ranNum = parseFloat(((this.ramInfo.totalRamSize - this.ramInfo.freeRamSize)/(1024 * 1024)).toFixed(2)) 
        this.optionRam.series[0].data[0].value = ranNum;
        this.used = ranNum.toFixed(1) + "%";
        this.optionRam.series[0].data[1].value =  parseFloat((this.ramInfo.freeRamSize/(1024 * 1024)).toFixed(2));
      }
      // var now = new Date().toLocaleTimeString();
      var time = new Date();
      var now = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`

      var myChart1 = document.getElementById("chart1");
      let chart1 = echarts.init(myChart1);
      chart1.setOption(this.optionRam);
      this.info = false;
    },
    refreshChart2() {
      // var now = new Date().toLocaleTimeString();
      var time = new Date();
      var now = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`

      this.optionCPU.xAxis[0].data.shift();
      this.optionCPU.xAxis[0].data.push(now);
      this.optionCPU.series[0].data.shift();
      this.optionCPU.series[0].data.push((this.cpuLoad ).toFixed(2));

      var myChart2 = document.getElementById("chart2");
      let chart2 = echarts.init(myChart2);
      chart2.setOption(this.optionCPU);
    },
    refreshChart3() {     
      // var now = new Date().toLocaleTimeString();
      var time = new Date();
      var now = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`

      this.optionPro.xAxis[0].data.shift();
      this.optionPro.xAxis[0].data.push(now);
      this.optionPro.series[0].data.shift();
      this.optionPro.series[0].data.push(this.procCnt.toFixed(0));

      var myChart3 = document.getElementById("chart3");
      let chart3 = echarts.init(myChart3);
      chart3.setOption(this.optionPro);
    },
    GetRandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      return Min + Math.round(Rand * Range);
    }
  },
  mounted() {    
    var myChart1 = document.getElementById("chart1");
    let chart1 = echarts.init(myChart1);
    chart1.setOption(this.optionRam);

    var myChart2 = document.getElementById("chart2");
    let chart2 = echarts.init(myChart2);
    chart2.setOption(this.optionCPU);

    var myChart3 = document.getElementById("chart3");
    let chart3 = echarts.init(myChart3);
    chart3.setOption(this.optionPro);
    this.changeData()
    getData = setInterval(this.changeData, 3000);
  },
  destroyed() {
    clearInterval(getData);
  }
};
</script>
<style>
#chart1,
#chart2,
#chart3 {
  display: block;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
</style>

